// JavaScript Document
/* PROJECT : Web Cliente Plus
*	@require MyClass.js
*			 MenuSection.js
*			 MyAjax.js
*	         MyBoundingHandler.js
*	@autor: Mauricio Sanchez
*	@create: 02-12-2009
*
*	Dados un punto de evento (que puede ser fijo o movil) y un punto de movil asignado, esta clase va graficando y actualizando las posiciones de los dos
*	puntos en cuestion, permitiendo calcular mediante Gmap Pedometer la mejor ruta entre los dos puntos.
*
*/
//HEREDA DE 'MenuSection'
MenuInfoGral = new MyClass({
	CLASS_NAME: "MenuInfoGral",
	VERSION_NUMBER: "v 1.0.0",			
	 
	 /**  
     * Propertyes: Definicion de properties de configuracion general.
     */	 
	 	 
	 /**  
     * Propertyes: flags y variables generales
     */	 	 	 
	 _miniMenu: null, //{MiniMenu}	 
	 _infoEventoDIV: null, //{DOMELEMENT} Div contenedor de la informacion del evento.
	 _infoMovilDIV: null, //{DOMELEMENT} Div contenedor de la informacion del movil asignado.
	 
	 /** 
     * Method: init
     */
	 init: function(opciones){
		this.parent(opciones);	
		this.name = "menuInfoGral";		
		this.title = "Informacion general";
		//create MiniMenu.
		this._container.className = 'MiniMenu';
		var me = this;
		this._miniMenu = new MiniMenu({
									  	name: 'MiniMenu_'+this.name,
										container: this._container
									  });		
		this._miniMenu.addButton({ classButton: 'recorrido',
								   onClickFunction: function(){me._goToMenuGetRoad();},
								   //classOnClick: null,
					   			   info: 'Mostrar el recorrido mas optimo'
					 			});	
		this._createInfoEvento();
		this._createInfoMovil();
	  },
	  
	  _goToMenuGetRoad: function(){
		  if (!this.sectionContent.viewSection('menuGetRoad')){			  
			  //creo la seccion y luego la muestro
			  var menuGetRoad = new MenuGetRoad({
										  		 sectionContent: this.sectionContent
										 	   });
			  this.sectionContent.appendSection(menuGetRoad);	
			  this.sectionContent.viewSection(menuGetRoad.name);
		  }
	  },
	 	 
	  _createInfoEvento:function(){
		 var eventosFieldSet = document.createElement('fieldset');
		 var legend = document.createElement('legend');
		 legend.innerHTML = "Informacion del evento";
		 eventosFieldSet.appendChild(legend);		 
		 this._infoEventoDIV = document.createElement('div');
		 this._infoEventoDIV.className = 'infoDiv';		 
		 this._infoEventoDIV.innerHTML = this.getDataTableEvento();
		 eventosFieldSet.appendChild(this._infoEventoDIV);		 
		 this._miniMenu.append(eventosFieldSet);
	  },
	  
	   _createInfoMovil:function(){
		 var eventosFieldSet = document.createElement('fieldset');
		 var legend = document.createElement('legend');
		 legend.innerHTML = "Movil asignado";
		 eventosFieldSet.appendChild(legend);		 
		 this._infoMovilDIV = document.createElement('div');
		 this._infoMovilDIV.className = 'infoDiv';	
		 this._infoMovilDIV.innerHTML = this.getDataTableMovil();
		 eventosFieldSet.appendChild(this._infoMovilDIV);
		 this._miniMenu.append(eventosFieldSet);
	  },
	  
	  getDataTableEvento: function(){
		  var getRow = function(label,value){
			  			  var response = "<tr>";
		  				  response += " <td valign='top' width='60' class='label'>";
						  response += label;
						  response += " </td>";
						  response += " <td class='field'>";
						  response += value;
						  response += " </td>";
						  response += "</tr>";
						  return (response);
		  			   }
		  var table = "<table>";
		  
		  var evento = this.sectionContent.evento;
		  table += getRow('Evento:',evento.nombre);
		  var myDate = new MyDate(evento.fecha);
		  table += getRow('Fecha:',myDate.elegantFormat());
		  var cuenta = this.sectionContent.cuenta;	
		  table += getRow('Cuenta:',cuenta.label1);
		  table += getRow('Direccion:',cuenta.direccion.dirSimple);
		  table += "</table>";
		  return table;
	  },
	  
	  getDataTableMovil: function(){
		  var getRow = function(label,value){
			  			  var response = "<tr>";
		  				  response += " <td valign='top' width='60' class='label'>";
						  response += label;
						  response += " </td>";
						  response += " <td class='field'>";
						  response += value;
						  response += " </td>";
						  response += "</tr>";
						  return (response);
		  			   }
		  var table = "<table>";
		  
		  var movil = this.sectionContent.movil;
		  table += getRow('Movil:',movil.label1);
		  var myDate = new MyDate(movil.direccion.lastFecha);
		  table += getRow('Ult. Fecha:',myDate.elegantFormat());
		  table += getRow('Direccion:',movil.direccion.dirSimple);		  
		  table += "</table>";
		  return table;
	  },
	
	  refreshInfo: function(){
		  this._infoMovilDIV.innerHTML = this.getDataTableMovil();
		  this._infoEventoDIV.innerHTML = this.getDataTableEvento();
	  }
		
}, MenuSection);